<!-- 
如无特殊需求，高度不超过可视区域则水平垂直居中
其它，尽可能不引发浏览器滚动条
 -->
<template>
    <el-dialog v-model="visable" v-bind="$attrs" :draggable="draggable" :close-on-click-modal="closeOnClickModal" :close-on-press-escape="closeOnPressEscape" destroy-on-close>
        <template #header>
            <div class="custom-dialog-title">{{ title }}</div>
        </template>
        <slot name="default">请书写弹窗内容</slot>
        <template #footer>
            <slot name="footer">
                <el-button @click="visable = false" type="default" plain>{{ cancelBtnLabel }}</el-button>
                <el-button type="primary" @click="visable = false" plain>
                    {{ cofirmBtnLabel }}
                </el-button>
            </slot>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
const props = defineProps({
    title: {
        type: String,
        default: '确认无需弹窗标题？'
    },
    draggable: {
        type: Boolean,
        default: true
    },
    closeOnClickModal: {
        type: Boolean,
        default: false
    },
    closeOnPressEscape: {
        type: Boolean,
        default: true
    },
    cancelBtnLabel: {
        type: String,
        default: '取消'
    },
    cofirmBtnLabel: {
        type: String,
        default: '确认'
    }
});
const visable = ref(false);
const open = () => {
    visable.value = true;
};
defineExpose({
    open
});
</script>

<style scoped>
.body {
    width: 100%;
    height: 100px;
    background-color: aqua;
}
.custom-dialog-title {
    text-align: left;
}
</style>
